import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input,Button,List } from 'antd'
import store from './store/index'
import { actionT} from './store/actionTypes'
import {changeInputAction,getTodoList} from './store/actionCreators'
import TodoListUI from './TodoListUI'
import axios from 'axios'
class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state=store.getState();//从store获取数据
        store.subscribe(this.storeChange.bind(this)) //监听store数据更新时执行storeChange方法-订阅模式
    }
    render() { 
        return (
            // <div style={{margin:'10px'}}>
            //     <div>
            //         <Input placeholder='write someting' onChange={this.changeInputValue.bind(this)} style={{ width:'250px', marginRight:'10px'}}/>
            //         <Button type="primary" onClick={this.addItem.bind(this)}>增加</Button>
            //     </div>
            //     <div style={{margin:'10px',width:'300px'}}>
            //         <List
            //             bordered
            //             dataSource={this.state.list}
            //             renderItem={(item,index)=>(<List.Item>{item} <span data-index={index} onClick={this.deleteItem.bind(this,index)}>X</span></List.Item>)}
            //         />    
            //     </div>
            // </div>
            <TodoListUI 
            inputValue={this.state.inputValue}
            list={this.state.list}
            changeInputValue={this.changeInputValue.bind(this)}
            addItem={this.addItem.bind(this)}
            deleteItem={this.deleteItem.bind(this)}
        />
        );
    }
    componentDidMount(){
        var list=[
            '早上4点起床，锻炼身体',
            '中午下班游泳一小时',
            '晚上8点到10点，学习两个小时',
            '11点睡觉'
          ]
          setTimeout(() => {
            // const action ={
            //     type:actionT.getList,
            //     value:list
            // }
            // store.dispatch(action)
            const action = getTodoList()
            store.dispatch(action)
          }, 1000);
         
        // const action = actionT.GET_LIST(data)
        
        // axios.get('https://www.easy-mock.com/mock/5df8a549e900131fd9d9f765/react/todolist').then((res)=>{
        //     console.log(res)
        //     const data = res.data
        //     const action = actionT.getListAction(data)
        //     store.dispatch(action)
        // })
    }
    // store数据更新
    storeChange(){
        this.setState(store.getState()) //更新数据
    }
    // 输入框改变
    changeInputValue(e){
        // const action ={
        //     type:actionT.changeInput,
        //     value:e.target.value
        // }
        const action = changeInputAction(e.target.value)
        store.dispatch(action)  //传递action
    }
    //添加事项
    addItem(){
        const action ={
            type:actionT.addItem,
            value:this.state.inputValue
        }
        store.dispatch(action)  //传递action
    }
    //删除事项
    deleteItem(index){
        const action ={
            type:actionT.deleteItem,
            index
        }
        store.dispatch(action)  //传递action
    }
}
 
export default Todolist;